<link rel="import" href="../../bower_components/polymer/polymer.html">
<link rel="import" href="../../bower_components/chopsui/chops-header.html">
<link rel="import" href="../../bower_components/iron-ajax/iron-ajax.html">
<link rel="import" href="../../bower_components/iron-doc-viewer/iron-doc-nav.html">
<link rel="import" href="../../bower_components/iron-doc-viewer/iron-doc-viewer.html">
<link rel="import" href="../../bower_components/iron-doc-viewer/iron-doc-viewer-styles.html">
<link rel="import" href="../../bower_components/marked-element/marked-element.html">
<link rel="import" href="../../bower_components/prism-element/prism-highlighter.html">
<link rel="import" href="../../bower_components/prism-element/prism-theme-default.html">

<dom-module id="cg-app">
  <template>
    <style include="iron-doc-viewer-styles prism-theme-default">
      chops-header {
        position: fixed;
        height: 60px;
        margin: 0;
        border-bottom: 1px solid hsl(227, 50%, 85%);
      }
      iron-doc-viewer {
        --iron-doc-title: {
          display: none;
        }
      }
      iron-doc-viewer,
      .help-page {
        padding: 0.5em 16px;
        height: 100%;
        width: 100%;
        box-sizing: border-box;
      }
      .container {
        width: 100%;
        height: 100%;
        padding-top: 60px;
        padding-left: 256px;
        box-sizing: border-box;
      }
      .nav-menu {
        left: 0;
        width: 256px;
        border-right: 1px solid hsl(0, 0%, 90%);
        height: 100%;
        position: fixed;
        background: hsl(0, 0%, 97%);
      }
      .nav-menu h3 {
        color: hsl(0, 0%, 44%);
        padding: 0 24px;
      }
      .nav-menu a {
        display: block;
        padding: 0 24px;
        width: 100%;
        text-decoration: none;
        color: hsl(0, 0%, 20%);
      }
      a.page-link {
        padding-bottom: 0.5em;
      }
      [slot="markdown-html"] pre {
        background: hsl(0, 0%, 96%);
        padding: 1em 32px;
      }
    </style>
    <prism-highlighter></prism-highlighter>
    <iron-ajax
        auto
        url="/static/analysis.json"
        handle-as="json"
        last-response="{{_descriptor}}"
        loading="{{_loading}}"
        last-error="{{_error}}">
    </iron-ajax>
    <chops-header app-title="ChopsUI Gallery" logo-src="/images/chromium.png">
      <span slot="subheader">
        &gt; [[_title]]
      </span>
    </chops-header>
    <div hidden$="[[!_loading]]">
      Loading descriptor ...
    </div>
    <div hidden$="[[!_error]]">
      Failed loading element descriptor. [[_error.error]]
    </div>
    <div class="container">
      <div class="nav-menu">
        <h3>Help Pages</h3>
        <a class="page-link" href="/help/about">About ChopsUI</a>
        <a class="page-link" href="/help/style">Style Guide</a>
        <iron-doc-nav
            descriptor="[[_descriptor]]"
            base-href=""
            path="[[_path]]">
        </iron-doc-nav>
      </div>
      <template is="dom-if" if="[[_helpFilePath]]">
        <marked-element class="help-page" sanitize>
          <div slot="markdown-html"></div>
          <script type="text/markdown" src="[[_helpFilePath]]"></script>
        </marked-element>
      </template>
      <iron-doc-viewer
          id="viewer"
          descriptor="[[_descriptor]]"
          base-href=""
          title="{{_title}}"
          path="{{_path}}">
      </iron-doc-viewer>
    </div>
  </template>
  <script src="./cg-app.js"></script>
</dom-module>
